<template>
	<div class="discover">
		<div>
			<Input prefix="ios-search" @on-enter="getList" v-model="keyword" placeholder="搜索智能体" style="width: 100%" />
		</div>
		<div class="menu-content">
			<div class="item" :class="{ active: activeType === item.value }" v-for="item in typeList" :key="item.value" @click="handleItem(item)">
				<span>{{ item.label }}</span>
			</div>
		</div>
		<Row :gutter="32" class="card-list">
			<Col v-show="activeType === '我的智能体'" class="card-item" :xs="24" :sm="24" :md="12" :lg="8" :xxl="6">
				<Card :isAdd="true" @add="add"></Card>
			</Col>
			<Col class="card-item" :xs="24" :sm="24" :md="12" :lg="8" :xxl="6" v-for="item in agentList" :key="item.id">
				<Card :item="item" @edit="edit" @delete="del" @use="use"></Card>
			</Col>
		</Row>
	</div>
</template>
<script>
import Card from './components/card.vue'
import { EventBus } from '@/libs/eventbus'
export default {
	components: {
		Card
	},
	data() {
		return {
			keyword: '',
			typeList: [
				{
					label: '我的智能体',
					value: '我的智能体'
				},
				{
					label: '游戏',
					value: '游戏'
				},
				{
					label: '创作',
					value: '创作'
				},
				{
					label: '学习',
					value: '学习'
				},
				{
					label: '趣味',
					value: '趣味'
				},
				{
					label: '生活',
					value: '生活'
				},
				{
					label: '情感',
					value: '情感'
				},
				{
					label: '角色',
					value: '角色'
				},
				{
					label: '工作',
					value: '工作'
				}
			],
			activeType: '我的智能体',
			agentList: []
		}
	},
	methods: {
		async getList() {
			const res = await chrome.webview.hostObjects.form.GetListAsync(this.activeType, this.keyword)
			// console.log(res)
			const { data } = JSON.parse(res)
			this.agentList = data
			this.$nextTick(() => {
				this.setAddCardHeight()
			})
		},
		handleItem(item) {
			this.activeType = item.value
			this.getList()
		},
		add() {
			this.$router.push({
				name: 'discover_edit'
			})
		},
		edit(item) {
			this.$router.push({
				name: 'discover_edit',
				query: {
					id: item.id
				}
			})
		},
		async del(item) {
			const res = await chrome.webview.hostObjects.form.DeleteAsync(item.id)
			const { code } = JSON.parse(res)
			if (code === '0') {
				this.$Message.success({
					content: '删除成功'
				})
				this.getList()
				EventBus.$emit('refreshChatList')
			} else {
				this.$Message.error({
					content: '删除失败'
				})
			}
		},
		async use(item) {
			let res = await chrome.webview.hostObjects.chatHelper.CreateAgentChatAsync(item.id)
			res = JSON.parse(res)
			console.log(res)
			if (res.code === '0') {
				EventBus.$emit('useAgent', {
					id: res.data,
					isAdd: true
				})
			} else {
				EventBus.$emit('useAgent', {
					id: item.id,
					isAdd: false
				})
			}
		},
		setAddCardHeight() {
			const otherCards = document.querySelectorAll('.card:not(.add-card)')
			const addCard = document.querySelector('.add-card')

			const cardHeight = (otherCards?.length && otherCards[0].clientHeight) || 142 // 获取第一个其他卡片的高度

			addCard.style.height = cardHeight + 'px' // 将高度应用于"add-card"
		}
	},
	mounted() {
		this.getList()
	}
}
</script>
<style lang="less" scoped>
.discover {
	/deep/.ivu-input {
		font-size: 1.17rem;
		// color: var(--setting-text-title-color);
		// background-color: var(--bg-color);
		// border: 1px solid var(--input-border-color);
		border-radius: 20px;
	}
	padding: 4rem 6.75rem;
	.menu-content {
		margin-top: 1.5rem;
		display: flex;
		flex-wrap: wrap;
		.item {
			background: var(--discover-menu-bg-color);
			border-radius: 1.33rem;
			padding: 0.4rem 1.5rem;
			margin-right: 0.96rem;
			//width: 5.6rem;
			text-align: center;
			cursor: pointer;
			span {
				font-family: PingFangSC-Regular;
				font-size: 1.17rem;
				color: var(--discover-text-color);
				letter-spacing: 0;
				text-align: center;
				line-height: 2rem;
				font-weight: 400;
			}
			&:hover:not(.active) {
				background-image: linear-gradient(136deg, #ffb34630 0%, #fe8e0030 100%);
			}
		}

		.active {
			background-image: linear-gradient(136deg, #ffb346 0%, #fe8e00 100%);
			// box-shadow: 0rem 0.17rem 0.33rem 0rem rgba(215, 215, 215, 0.5);
			border-radius: 1.33rem;
			span {
				font-family: PingFangSC-Semibold;
				color: #ffffff;
				font-weight: 600;
			}
		}
	}
	.card-item {
		margin-bottom: 2.67rem;
		// margin-right: 2.67rem;
	}
	.card-list {
		margin-top: 2.67rem;
		max-height: calc(100vh - 20rem);
		overflow-y: auto;
	}
}
</style>
